<template>
  <el-container>
    <el-main>
      <div class="login-top">
        <span class="fl">
          <img src="../../assets/images/logo-system.png">
        </span>
        <span class="fr">
          <img src="../../assets/images/logo-company.png">
        </span>
      </div>
      <div class="focus-login-con">
        <img src="../../assets/images/focus-title.png" class="top-title">
        <div>
          <div class="grey-bor">
            <div class="login-block-bor">
              <div class="login-block">
                <div class="department">
                  <img src="../../assets/images/focus-test.png" align="text-top"> 检测中心系统
                </div>
                <button class="login-button" style="background': '#022278">管理</button>
              </div>
            </div>
          </div>
          <div class="grey-bor mar-100">
            <div class="login-block-bor">
              <div class="login-block">
                <div class="department">
                  <img src="../../assets/images/focus-quality.png" align="text-top"> 质保部门系统
                </div>
                <button class="login-button" style="background': '#448aca">管理</button>
              </div>
            </div>
          </div>
          <div class="grey-bor">
            <div class="login-block-bor">
              <div class="login-block">
                <div class="department">
                  <img src="../../assets/images/focus-measure.png" align="text-top"> 计量管理系统
                </div>
                <button class="login-button" style='background: #9c9c9c;' @click="jumpToTestAssurance">管理</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <el-footer>
      <span>版权所有
        <span class="pdl-10">上海汽车变速器有限公司</span>
      </span>
      <span class="pdl-100">开发单位
        <span class="pdl-10">上海骏诺信息科技有限公司</span>
      </span>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'index',
    methods: {
      jumpToTestAssurance() {
        this.$router.push({
          path: '/main/abstract'
        })
      }
    }
  }

</script>

<style scoped>
  .el-container {
    height: 100%;
  }

  .el-main {
    padding-top: 0;
    overflow: hidden;
  }

  .el-main,
  .focus-login-con {
    height: 100%;
  }

  .el-footer {
    background: #184696;
    color: #ffffff;
    text-align: center;
    line-height: 60px;
  }

  .login-top img {
    margin-top: 17px;
  }

  .focus-login-con {
    width: 100%;
    text-align: center;
  }

  .top-title {
    margin-bottom: 120px;
    margin-top: 50px;
  }

  .focus-login-con {
    width: 100%;
    /* height: calc(100% - 90px); */
    background-image: url("../../assets/images/focus-bg-1.png");
    background-size: 100% 100%;
    padding-top: 8%;
  }

  .focus-login-con .login-button {
    width: 90px;
    height: 48px;
    font-size: 20px;
    border-radius: 4px;
    border: 2px solid #fff;
    cursor: pointer;
  }

  .login-block {
    width: 288px;
    height: 175px;
    border-radius: 5px;
    background: linear-gradient(to bottom, #719ae3, #16408a);
  }

  .login-block-bor {
    border: 10px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
  }

  .grey-bor {
    display: inline-block;
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    color: #fff;
    font-size: 26px;
  }

  .grey-bor button {
    border: 1px solid #fff;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .pdl-100 {
    padding-left: 100px;
  }

  .pdl-10 {
    padding-left: 10px;
  }

  .mgr-10 {
    margin-right: 10px;
  }

  .mar-100 {
    margin: 0 100px;
  }

  .department {
    padding: 30px 0 20px;
  }

  .department img {
    margin-right: 5px;
  }

  /* 屏幕适配 */

  @media (max-width: 1280px) {
    .login-block {
      width: 245px;
      height: 155px;
      border-radius: 5px;
      background: linear-gradient(to bottom, #719ae3, #16408a);
    }
    .login-block-bor {
      border: 10px solid rgba(255, 255, 255, 0.2);
      border-radius: 5px;
    }
    .mar-100 {
      margin: 0 50px;
    }
  }

</style>
